<!-- <template>
	<view>
		<echarts ref="echarts" :option="option" :canvasId="echarts"></echarts>
	</view>
</template>

<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	export default {
		name:"barChart",
		props: {
		    xData: {
		      type: Array,
		      default: () =>['40', '60', '42', '43', '52', '37', '47', '70', '32', '46', '37', '59', '53']
		    },
				yData:{
					type: Array,
					default: () => ['济南市', '青岛市', '烟台市', '威海市', '泰安市', '聊城市', '枣庄市', '潍坊市', '东营市', '淄博市', '德州市', '临沂市', '菏泽市'],
				},
				echarts:{
					type:String,
					default:'echarts'
				}
		  },
		data() {
			return {
				option: {},
			};
		},
		created() {
			this.option = {
				toolbox: {
					show: true,
					feature: {
						mark: {
							show: true
						},
						dataView: {
							show: true,
							readOnly: false
						},
						magicType: {
							show: true,
							type: ['line', 'bar']
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				calculable: true,
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data: this.yData,
					axisLabel: {
						rotate: 60,
						textStyle: {
							color: '#979797',
							fontSize: 10
						}
					},
					axisLine: {
						show: true,
						lineStyle: {
							type: 'solid',
							color: '#D9D9D9',//左边线的颜色
							width: '1'//坐标线的宽度
						}
					},
					
				}],
				yAxis: [{
					type: 'value',
					axisLine: {
						show: true,
						minInterval:1,
						lineStyle: {
							type: 'solid',
							color: '#D9D9D9',//左边线的颜色
							width: '1'//坐标线的宽度
						}
					},
					splitLine: {
						show: false,
					}
				}],
				series: [{
					name: '考试参与率',
					type: 'bar',
					data: this.xData,
					barWidth: 8,
					itemStyle: {
						normal: {
							color: '#508CFF',
							barBorderRadius: [10, 10, 10, 10], //依次表示 左上，右上，右下、左下
							label: {
								show: true, //开启显示
								position: 'top', //在上方显示
								textStyle: { //数值样式
									color: '#508CFF',
									fontSize: 10
								}
							}
						}
			
					},
				}]
			}
		},
	}
</script>

<style>

</style> -->
<template>
  <view :id="id" :style="style"></view>
</template>
 
<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
export default {
  name: 'charts',
	components:{
		echarts
	},
  data () {
    return {
      chart: ''
    }
  },
  props: {
  	id: {
  	  	type: String
  	},
  	width: {
  		type: String,
  		default: '100%'
  	},
  	height: {
  		type: String,
  		default: '100%'
  	},
  	option: {
  		type: Object,
  		default() {
  			return {
	  			title: {
	                text: 'ECharts 入门示例'
	            },
	            tooltip: {},
	            legend: {
	                data:['销量']
	            },
	            xAxis: {
			        type: 'category',
			        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			    },
			    yAxis: {
			        type: 'value'
			    },
			    series: [{
			        data: [820, 932, 901, 934, 1290, 1330, 1320],
			        type: 'line'
			    }]
  			}
  		}
  	}
  },
  computed: {
  	style() {
  		return {
  			width: this.width,
  			height: this.height
  		}
  	}
  },
  watch: {
  	option: {
  		handler(newVal, oldVal) {
  			if (this.chart) {
  				this.chart.setOption(newVal)
  			} else {
  				this.init();
  			}
  		},
  		deep: true
  	}
  },

	mounted() {
		console.log(this.$refs)
		this.$refs.chart.init(echarts, chart => {
		chart.setOption(this.option);
		});
	},
  methods: {
  	init() {
			
			console.log(this)
  		this.chart = this.$echarts.init(document.getElementById(this.id))
  		this.chart.setOption(this.option)
  		window.addEventListener("resize", this.chart.resize);
  	}
  }
}
</script>